<template>
	<view class="aftersale">
		<view class="tabsBox">
			<view class="tabitem" :class="currIndex==0?'tabitemed':''" @click="handleTabstype(0)">
				<view class="">
					全部
				</view>
				<view v-if="currIndex==0" class="heng"></view>
			</view>
			<view class="tabitem" :class="currIndex==1?'tabitemed':''" @click="handleTabstype(1)">
				<view class="">
					处理中
				</view>
				<view v-if="currIndex==1" class="heng"></view>
			</view>
			<view class="tabitem" :class="currIndex==2?'tabitemed':''" @click="handleTabstype(2)">
				<view class="">
					已处理
				</view>
				<view v-if="currIndex==2" class="heng"></view>
			</view>
		</view>


		<view v-if="dataList.length" class="dataList">
			<view class="dataItem" v-for="(item,index) in dataList" :key="item.id">
				<view class="itemtop" @click="handleDetail(item)">
					<view class="orderNumber">
						{{item.created_at}}
					</view>
					<view v-if="item.status == 5" class="status" style="color: #FF3D3D;">
						审核中
					</view>
					<view v-if="item.status == 7" class="status" style="color: #FF3D3D;">
						退款失败
					</view>
					<view v-if="item.status == 8" class="status" style="color: #FF3D3D;">
						已退款
					</view>
				</view>

				<view class="productDetail" @click="handleDetail(item)">
					<view class="detailBox">
						<image :src="item.products_image" style="width: 160rpx;height: 160rpx;" mode="">
						</image>
						<view class="message">
							<view class="name">
								{{item.products_name}}
							</view>
							<view class="desc">
								规格：{{item.sku_text}}
							</view>
							<view class="bottom">
								<view class="price">
									₱{{item.price}}
								</view>
								<view class="number">
									x{{item.num}}
								</view>
							</view>
						</view>
					</view>
					<view class="descBox">
						<text> 共计{{item.num}}件商品</text> <text style="margin-left: 32rpx;"> 退款<text
								style="color: #FF3D3D;">₱{{item.all_price}}</text></text>
					</view>
				</view>

				<view v-if="item.status == 5" class="btnBox" style="display: flex;">
					<view class="btn btns" style="margin-left: 290rpx;" @click="handleEvaluate(item)">
						撤销申请
					</view>
					<view class="btn" style="margin-left: 30rpx;" @click="handleDetail(item)">
						查看详情
					</view>
				</view>

				<view v-else class="btnBox">
					<view class="btn" style="margin-left: 470rpx;" @click="handleDetail(item)">
						查看详情
					</view>
				</view>
			</view>
		</view>

		<view v-else class="">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无售后订单">
			</u-empty>
		</view>


		<view class="" style="height: 50rpx;"></view>


		<u-modal :show="delshow" :title="title" :showCancelButton="true" @confirm="handledelbacksales"
			@cancel="delshow = false" confirmColor="#439B05"></u-modal>


	</view>
</template>

<script>
	import {
		userorders,
		delbacksales
	} from "@/api/api.js"
	export default {
		data() {
			return {
				currIndex: 0,
				page: 1,
				page_size: 10,
				dataList: [],
				title: "确定要撤销售后吗?",
				delshow: false,
			}
		},
		onLoad() {

		},
		onShow() {
			page: 1,
			this.dataList = []
			this.handleuserorders()
		},
		onReachBottom() {
			this.page++;
			this.handleuserorders();
		},
		//下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.page = 1;
				this.dataList = []
				this.handleuserorders();
				uni.stopPullDownRefresh();
			}, 1000)

		},

		methods: {
			async handleuserorders() {
				let res = await userorders({
					status: 6,
					page: this.page,
					page_size: this.page_size,
					type: '2'
				})
				// this.dataList = res.data.data
				res.data.data.forEach((item, index) => {
					this.dataList.push(item)
				})
			},
			handleTabstype(index) {
				this.currIndex = index
				this.dataList = []
				this.page = 1
				this.handleuserorders()
			},
			handleEvaluate(item) {
				this.orderId = item.order_id
				this.delshow = true
			},
			async handledelbacksales() {
				let res = await delbacksales({
					id: this.orderId
				})
				if (res.code == 1000) {
					this.delshow = false
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
					setTimeout(() => {
						this.dataList = []
						this.page = 1
						this.handleuserorders()
					}, 2000)
				} else {
					this.delshow = false
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}
			},
			handleDetail(item) {
				uni.navigateTo({
					url: `./aftersaleDetail?id=${item.id}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.aftersale {
		.tabsBox {
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			padding: 30rpx 144rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
			padding-bottom: 0;



			.heng {
				width: 32rpx;
				height: 6rpx;
				background: #FF3D3D;
				margin-top: 10rpx;
			}

			.tabitem {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.tabitemed {
				color: #FF3D3D;
			}
		}


		.dataList {
			margin-top: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.dataItem {
				width: 100%;
				height: 484rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.itemtop {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 33rpx;
					border-bottom: 2rpx solid #F5F5F5;
				}

				.productDetail {
					width: 100%;
					height: 280rpx;
					padding: 30rpx 0;
					box-sizing: border-box;
					border-bottom: 2rpx solid #F5F5F5;

					.detailBox {
						display: flex;

						.message {
							margin-left: 20rpx;

							.name {
								font-size: 32rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 38rpx;
								width: 452rpx;
								white-space: nowrap;
								/* 设置不换行 */
								overflow: hidden;
								/* 设置超出部分隐藏 */
								text-overflow: ellipsis;
								/* 设置溢出的文本显示省略号 */
							}

							.desc {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 28rpx;
								margin-top: 20rpx;
							}

							.bottom {
								display: flex;
								width: 100%;
								justify-content: space-between;
								margin-top: 34rpx;

								.price {
									font-size: 32rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #333333;
									line-height: 38rpx;
								}

								.number {
									font-size: 28rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #999999;
									line-height: 33rpx;
								}
							}
						}
					}
				}

				.descBox {
					margin-top: 22rpx;
					text-align: right;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 33rpx;
				}

				.btnBox {
					margin-top: 20rpx;

					.btn {
						width: 160rpx;
						height: 64rpx;
						background: #439B05;
						border-radius: 100rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 64rpx;
						text-align: center;
					}

					.btns {
						border: 2rpx solid #CCCCCC;
						background: #FFFFFF;
						color: #333333;
					}
				}
			}
		}
	}
</style>